import React, { PureComponent } from 'react';
import "./index.less";

class Index extends PureComponent {
    static defaultProps = {
        data: []
    }
    constructor(props) {
        super(props);
        this.state = {
        };
        this.chart = null;
    }
    componentDidMount = () => {
        this.initChart();
    }
    componentDidUpdate = () => {
        this.initChart();
    }
    initChart = () => {
        if (!this.chart) {
            this.chart = window.$echarts.init(this.el);
        }
        if (this.props.data.length) {
            this.chart.setOption({
                grid: {
                    left: 0,
                    top: 0,
                    bottom: 0,
                    right: 0
                },
                xAxis: {
                    type: 'category',
                    show: false
                },
                yAxis: {
                    type: 'value',
                    show: false,
                    scale: true
                },
                series: [
                    {
                        data: this.props.data,
                        type: 'line',
                        symbol: 'none',
                        emphasis: {
                            lineStyle: {
                                width: 2
                            }
                        }
                    }
                ]
            })
        }
    }
    render() {
        return (
            <div className="shrink-line" ref={el => (this.el = el)}></div>
        )
    }
}

export default Index